<script setup lang="ts">
import type { PropType } from 'vue'
import { computed } from 'vue'
import { IconCheckCircleFill, IconExclamationCircleFill } from '@arco-design/web-vue/es/icon'

defineOptions({ name: 'ValidateTextarea' })

const $props = defineProps({
  modelValue: {
    type: String as PropType<string>,
    default: undefined,
  },
  useValidate: {
    type: Boolean as PropType<boolean>,
    default: true,
  },
  validator: {
    type: Function as PropType<() => boolean>,
    default: undefined,
  },
})
const $emits = defineEmits(['update:modelValue', 'input'])

const computedValue = computed<string | undefined>({
  get: () => $props.modelValue,
  set: (newValue) => {
    $emits('update:modelValue', newValue)
    $emits('input', newValue)
  },
})

const computedValidateState = computed<boolean>(() => {
  if ($props.validator && typeof $props.validator === 'function') {
    return $props.validator()
  }
  return !!computedValue.value?.length
})
</script>

<template>
  <div
    class="a-validate-textarea"
    :class="computedValidateState ? 'feedback-success' : 'feedback-error'"
  >
    <a-textarea v-model="computedValue" v-bind="$attrs" />
    <div v-if="useValidate" class="a-validate-textarea__suffix">
      <IconCheckCircleFill v-if="computedValidateState" size="16" />
      <IconExclamationCircleFill v-else size="16" />
    </div>
  </div>
</template>

<style lang="scss">
  .a-validate-textarea {
    position: relative;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    width: 100%;
    line-height: 1;

    .a-validate-textarea__suffix {
      width: 32px;
      position: absolute;
      top: 0;
      right: 0;
      height: 32px;
      //bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      pointer-events: none;
    }
    .arco-textarea-wrapper {
      height: 100%;
    }
    textarea.arco-textarea {
      padding-right: 32px;
    }

    &.feedback-success .arco-icon {
      color: rgb(var(--success-6));
    }
    &.feedback-error .arco-icon {
      color: rgb(var(--warning-6));
    }
  }
</style>
